<template>
    <div class="infoContent">
        <common-loading :loading="loading" loadingText="">
            <i slot="loadingIcon" class="el-icon-loading"></i>
        </common-loading>
        <div class="settingsContainer" v-if="!loading">
            <el-table :data="schemeData" width="100%"  height="93%" >
                <el-table-column type="index" prop="index" label="序号" width="80"></el-table-column>
                <el-table-column prop="schemeName" label="方案名称"></el-table-column>
                <el-table-column prop="capacity" label="车辆检测服务"></el-table-column>
                <!-- <el-table-column prop="capacity2" label="加油站监控服务"></el-table-column> -->
                <el-table-column prop="schemeDesc" label="方案描述"></el-table-column>
                <el-table-column label="是否启用" prop="isOpen">
                    <template slot-scope="props">
                        <span>{{ props.row.isOpen?"已启用":"未启用"}}</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-pagination class="pagination" layout="prev, pager, next" v-if="!loading && pageCount>1" :page-count="pageCount" :page-size="pageSize" 
        :current-page.sync="currentPage" @current-change="handleCurrentChange" @prev-click="handlePrevClick" @next-click="handleNextClick">
        </el-pagination>
    </div>
    
</template>
<script>
    import CommonLoading from "../components/CommonLoading.vue"
    export default {
        components:{
            CommonLoading
        },
        data(){
            return {
                loading:false,
                schemeData:[],
                tableData: [{
                    index:'1',
                    schemeName:'方案一',
                    faceCapacity: '2',
                    hatCapacity: '6',
                    actionCapacity:'5',
                    isDefault:true,
                    isOpen: true,
                    schemeDesc:'默认方案'
                }, {
                    index:'2',
                    schemeName:'方案二',
                    faceCapacity: '3',
                    hatCapacity: '6',
                    actionCapacity:'3',
                    isDefault:false,
                    isOpen: false,
                    schemeDesc:''
                }, {
                    index:'3',
                    schemeName:'方案三',
                    faceCapacity: '6',
                    hatCapacity: '3',
                    actionCapacity:'3',
                    isDefault:false,
                    isOpen: false,
                    schemeDesc:''
                }],
                pageCount:1,
                currentPage:1,
                pageSize:12
            }
        }, 
        created(){
            this.fetchData();
        },
        computed:{
            getState(){
                return this.$store.state.updateSchemeData;
            }
        },
        watch:{
            getState: function(newState){
                if(newState) this.fetchData();			
            }
        },
        methods: {
            fetchData(){
                this.loading = true;
                this.$api.scheme.schemeList({page_size:this.pageSize,page_index:parseInt(this.currentPage)}).then(response => {
                    setTimeout(()=>{
                        this.loading = false;
                    },500);
					if(response.data.code=="6000"){
                        // this.pageCount = response.data.data.total_pages;   //后端没有给定total_pages
                        let data = response.data.data.schemes;
                        let schemes = response.data.data.select;
                        if(!this.$store.state.currentScheme){
                            this.$store.dispatch("currentScheme", schemes); 
                        }
                        if(this.pageCount < this.currentPage){
                            this.currentPage -= 1;
                            this.fetchData();
                            return false;
                        }
                        this.processData(data);                    
                    }else{
                        this.$message({
                            message: util.getErrorInfo(response.data.code),
                            type: 'error'
                        });
                    }
				}).catch(error => {
                    this.loading = false;
                });
                this.$store.dispatch("updateSchemeData", false); 
            },
            processData(data){
                let tmpData = [];
                for(let i in data){
                    let schemeobj = {};
                    let functions = data[i]["functions"];
                    schemeobj["index"] = (this.currentPage-1)*this.pageSize+parseInt(i)+1;
                    schemeobj["schemeName"] = data[i]["name"];
                    schemeobj["schemeDesc"] = data[i]["description"];
                    schemeobj["isOpen"] = false;
                    schemeobj["capacity"] = 0;
                    //schemeobj["capacity2"] = 0;
                    if(this.$store.state.currentScheme == data[i]["name"]){
                        schemeobj["isOpen"] = true;
                        // this.$store.dispatch("currentScheme", data[i]["id"]); 
                    }
                    for(let j in functions){
                        if(functions[j]["fun_id"] == 1){    
                            schemeobj["capacity"] = functions[j]["capacity"];
                        }
                        /*else{
                            schemeobj["capacity2"] = functions[j]["capacity"];
                        }*/
                    }
                    tmpData.push(schemeobj); 
                }
                this.schemeData = tmpData;
            },
            handleCurrentChange(value){
                this.currentPage = value;
                this.fetchData();
            },
            handlePrevClick(value){
                this.currentPage = value;
                this.fetchData();
            },
            handleNextClick(value){
                this.currentPage = value;
                this.fetchData();
            }
        }
    }
</script>
<style lang="scss" scoped>
@import "../assets/basic.scss";
    .infoContent{
        .settingsContainer{
            overflow: hidden;
            width: 96%;
            height: 96%;
            margin: 2%;
            border-radius: 4px;
            //background:#fff;
            .pagination{
              background-color: $ims-table-bgcolor;   
            }
        }
    }
    
</style>
<!-- <style lang="css" scoped>
.settingsContainer .el-table{
    background-color:  #262E51;
}
.settingsContainer .el-table >>> th {
      background-color:  #262E51 ;
      color: #fff ;
    }

.settingsContainer .el-table >>> tr {
      background-color:  #262E51 ;
      color: #fff;
    }

.settingsContainer .el-table >>> td,
.settingsContainer .el-table >>> th.is-leaf {
      border-bottom: 1px solid rgba(0, 0, 0, .2);
    }   
    
</style> -->